<template>
  <div class="checkingin-box">
    <div class="checkingin-box-info" v-for="item in options" :key="item.value">
      <div class="item">
        <img :src="item.icon" alt="">
        <div class="info-text" :style="{ color: item.color }">
          <div class="desc">{{ item.name }}</div>
          <div class="text">{{ data[item.value] || 0 }}<span>{{ item.unit }}</span></div>
        </div>
      </div>
      <div class="chart" :ref="item.value"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

const getPieOptions =  (finish,color) => ({
  type: 'pie',
  radius: [24,28],
  hoverAnimation: false,
  center: ["50%", "50%"],
  data: [
    {
      value: finish,
      label: {
        normal: {
          formatter: function (params) {
            return `${params.value}%`;
          },
          position: "center",
          show: true,
          textStyle: {
            fontSize: "10",
            fontWeight: "normal",
            color: "#fff",
          },
        },
      },
      itemStyle: {
        normal: {
          color,
        },
      }
    },
    {
      value: 100 - finish,
      name: "invisible",
      label: {
        normal: {
          show: false,
        },
      },
      itemStyle: {
        normal: {
          color: "#24375c",
        },
      },
    },
  ],
})

export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      options: [
        {
          name: '考勤正常',
          icon: require('@/assets/images/bigScreen/attendance/man.png'),
          color: '#1A7BDE',
          value:'normal',
          unit: '人',
        },
        {
          name: '考勤异常',
          icon: require('@/assets/images/bigScreen/attendance/woman.png'),
          color: '#E7737B',
          value: 'abnormal',
          unit: '人',
        },
      ],
      normalChart: null,
      abnormalChart: null,
    };
  },
  computed: {
    normal() {
      return this.data?.normalPercent ?? 0;
    },
    abnormal() {
      return this.data?.abnormalPercent ?? 0;
    },
  },
  watch: {
    normal() {
      this.onInitNormalPie();
    },
    abnormal() {
      this.onInitAbnormalPie();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.onInitChart();
      this.onBus();
    })
  },
  beforeDestroy() {
    this.$bus.$off('resize', this.onChangeReSize);
    this.$bus.$off('changeIsPackUp', this.onChangeIsPackUp);
  },
  methods: {
    onBus() {
      this.$bus.$on('resize',this.onChangeReSize);
      this.$bus.$on('changeIsPackUp', this.onChangeIsPackUp);
    },
    onChangeIsPackUp(val) {
      if (val) return false;
      setTimeout(() => {
        this.onChangeReSize();
      }, 500)
    },
    onChangeReSize() {
      this.normalChart.resize();
      this.abnormalChart.resize();
    },
    onInitChart() {
      this.abnormalChart = echarts.init(this.$refs.abnormal?.[0]);
      this.normalChart = echarts.init(this.$refs.normal?.[0]);
    },
    onInitNormalPie() {
      if (!this.normalChart) return false;
      const series = getPieOptions(this.normal, '#66bbf9');
      this.normalChart.setOption({series});
    },
    onInitAbnormalPie() {
      if (!this.abnormalChart) return false;
      const series = getPieOptions(this.abnormal, '#87f7c7');
      this.abnormalChart.setOption({series});
    },
  },
}
</script>

<style scoped lang="scss">
.checkingin-box {
  height: 100%;
  position: relative;
  &-info {
    position: relative;
    height: 50%;
    display: flex;

    .item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      height: 100%;
      width: 60%;
      img {
        height: 30px;
        object-fit: cover;
        margin-right: 6px;
      }
      .info-text {
        .desc {
          font-size: 11px;
        }
        .text {
          font-size: 18px;
          font-weight: bolde;
          span {
            font-size: 11px;
            color: #fff;
          }
        }
      }
    }
    .chart {
      height: 100%;
      width: 40%;
    }
  }
}
</style>
